<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* nav>div:first-child{
				background: red;
			}
			nav>div:last-child{
				background: green;
			} */
			nav>div:first-of-type{background: blue;}
			nav>div:last-of-type{background: yellowgreen;}
		</style>
	</head>
	<body>
		<nav>
			<p>p1</p>
			<div>div1</div>
			<div>div2</div>
			<div>div3</div>
			<div>div4</div>
			<div>div5</div>
			<h3>h3</h3>
		</nav>
	</body>
</html>
<!-- 
结构伪类选择符
	不限定元素类型：会从所有子元素中查找第几个，然后判断是否为需要匹配的子元素
		E>F:first-child{属性: 属性值;属性: 属性值;属性: 属性值;}
			匹配父元素E中的第一个子元素 F元素，为其添加样式
			首先会从父元素E中查找到第1个子元素，然后判断第1个子元素是否为需要匹配的F元素
			是则将样式执行给元素，不是则不会执行样式
		E>F:last-child{属性: 属性值;属性: 属性值;属性: 属性值;}
			匹配父元素E中的倒数第一个子元素 F元素，为其添加样式
			首先会从父元素E中查找到倒数第1个子元素，然后判断倒数第1个子元素是否为需要匹配的F元素
			是则将样式执行给元素，不是则不会执行样式
		
	限定元素类型：仅会从需要匹配的子元素中查找，不会管不需要匹配的子元素
		E>F:first-of-type{属性: 属性值;属性: 属性值;属性: 属性值;}
			匹配父元素E中的第1个具有指定类型的子元素F元素，为其添加样式
			仅会从需要匹配的子元素中查找第1个子元素，给其执行样式
		E>F:last-of-type{属性: 属性值;属性: 属性值;属性: 属性值;}
			匹配父元素E中的倒数第1个具有指定类型的子元素F元素，为其添加样式
			仅会从需要匹配的子元素中查找倒数第1个子元素，给其执行样式
-->